body {
	margin: 0;
}

/* Main game area */
#playarea {
	width: 1000px;
	height: 1000px;

	position: absolute;
	
	z-index: 1;

	/*-moz-transform:rotate(90deg);
	-moz-transform-origin: center;
	-webkit-transform:rotate(90deg);
	-webkit-transform-origin: center;
	-o-transform:rotate(90deg);
	-o-transform-origin: center;
	-ms-transform:rotate(90deg);
	-ms-transform-origin: center;
	/*filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0);*/
}

#supply {
	background-color: orange;
	position: absolute;
	height: 40%;
	width: 50%;

	z-index: 2;
	left: 30%;
	top: 30%;
	}

	#supply .kingdom {
		width: 90px;
		margin-top: 2px;
		margin-bottom: 2px;
		margin-left: 8px;
		float: left;
	}

	#supply #otherSupply .card {
		width: 60px;
		float: left;
		margin-top: 2px;
		margin-left:2px;
}

#trash {
	background-color: gray;
	position: absolute;
	height: 143px; /* Should be same as card */
	width: 90px;

	top: 400px;
	left: 1000px;
}

/* Cards */
#playarea .card {
	max-width: 90px;
}

#supply .card {
	max-width: 125px;
}

img {
	max-width: 100%;
}

/* Play areas */
#p1_playfield, #p2_playfield, #p3_playfield, #p4_playfield {
	position: absolute;
}

#p1_playfield {
	background-color: blue;
	width: 70%;
	height: 30%;

	left: 30%;
	bottom: 0;
}

#p2_playfield {
	background-color: red;
	width: 70%;
	height: 30%;

	top: 30%;
	left: 30%;

	-moz-transform:rotate(90deg);
	-moz-transform-origin: top left;
	-webkit-transform:rotate(90deg);
	-webkit-transform-origin: top left;
	-o-transform:rotate(90deg);
	-o-transform-origin: top left;
	-ms-transform:rotate(90deg);
	-ms-transform-origin: top left;
	/*filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0);*/
}

#p3_playfield {
	background-color: yellow;
	width: 70%;
	height: 30%;
	
	top: 30%;
	left: 80%;

	-moz-transform:rotate(180deg);
	-moz-transform-origin: top left;
	-webkit-transform:rotate(180deg);
	-webkit-transform-origin: top left;
	-o-transform:rotate(180deg);
	-o-transform-origin: top left;
	-ms-transform:rotate(180deg);
	-ms-transform-origin: top left;
	/*filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2.0);*/
}

#p4_playfield {
	background-color: green;
	width: 70%;
	height: 30%;

	top: 70%;
	left: 80%;

	-moz-transform:rotate(270deg);
	-moz-transform-origin: top left;
	-webkit-transform:rotate(270deg);
	-webkit-transform-origin: top left;
	-o-transform:rotate(270deg);
	-o-transform-origin: top left;
	-ms-transform:rotate(270deg);
	-ms-transform-origin: top left;
	/*filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3.0);*/
}

/* Player areas */
.hand {
	position:absolute;
	bottom: 0;
	left: 30px; /* Should equal margin-left as below */
	}
	.hand .card {
		position:static;
		float:left;
		margin-left: -30px;
}

.deck {
	position: absolute;
	width: 90px;
	height: 143px;
	
	bottom: 0;
	right: 100px;
}

.discard {
	position:absolute;
	width: 90px;
	height: 143px;
	
	bottom: 0;
	right: 0;
}

.name {
	position: static;

	text-align: right;
	font-style: italic;
	font-weight: bold;
	font-size: 18pt;
}

/* Player Resources */
.resources {
	position: absolute;
	width: 100px;
	font-size: 16pt;

	right: 0;
}

.actionsLabel {
	float: left;
	margin-right: 5px;
}

.actionsCount {
	float: right;
	margin-right: 5px;
}

.moneyLabel {
	float:left;
	margin-right: 5px;
}

.moneyCount {
	float: right;
	margin-right: 5px;
}

.buysLabel {
	float:left;
	margin-right: 5px;
}

.buysCount {
	float: right;
	margin-right: 5px;
}